<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 类别管理
        </el-breadcrumb-item>
        <el-breadcrumb-item>类别编辑</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <el-form ref="formRef" :rules="rules" :model="form" label-width="80px">
        <el-form-item label="房间号" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {ref, reactive} from "vue";
import {useRoute, useRouter} from "vue-router";
import request from "../../utils/request";
import {ElMessage} from "element-plus";
import {useStore} from "vuex";

export default {
  name: "AddRoomEdit",
  setup() {
    const router = useRouter();
    const route = useRoute();
    const store = useStore();

    const rules = {
      name: [{required: true, message: "请输入名称", trigger: "blur"}],
    };
    const formRef = ref(null);
    var form = reactive({
      sid: "",
      name: "",
      buildingId: "",
      floor: ""
      // fixed: 0,
    });

    if (route.query.id) {
      request.get("/room/" + route.query.id).then((res) => {
        form.sid = route.query.id;
        form.name = res.data.name;
        form.buildingId = res.data.buildingId;
        form.floor = res.data.floor
      });
    }

    // 提交
    const onSubmit = () => {
      // 表单校验
      formRef.value.validate((valid) => {
        if (valid) {
          var method = form.sid === "" ? "POST" : "PUT";
          request({
            url: "/room",
            method: method,
            data: form,
          }).then((res) => {
            ElMessage.success("提交成功！");
            // 关闭当前页面的标签页;
            store.commit("closeCurrentTag", {
              $router: router,
              $route: route,
            });
            router.push("/admin/roombed");
          });
        } else {
          return false;
        }
      });
    };
    return {rules, formRef, form, onSubmit};
  },
};
</script>

<style>
</style>